<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
</head>
<body>
    <div class="nav">网络五子棋对战游戏</div>
    <div class="container">
        <div>
            <div id="screen"></div>
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>

        // websocket长连接url和句柄
        var ws_url = "ws://" + location.host + "/hall";
        var ws_hdl = null;
        
        // 关闭当前页面、刷新页面或跳转到其他页面时，主动关闭websocket连接
        window.onbeforeunload = function() { 
            ws_hdl.close(); 
        }

        // 按钮有两个状态：没有进行匹配的状态、正在匹配中的状态
        var button_flag = "stop";
        // 点击按钮的事件处理
        var be = document.getElementById("match-button");
        be.onclick = function()  {
            if (button_flag == "stop") {
                // 1. 没有进行匹配的状态下点击按钮，发送对战匹配请求
                var request_json = {
                    optype: "match_start"
                };
                ws_hdl.send(JSON.stringify(request_json));
            } else {
                // 2. 正在匹配中的状态下点击按钮，停止发送对战匹配请求
                var request_json = {
                    optype: "match_stop"
                };
                ws_hdl.send(JSON.stringify(request_json));
            }
        }

        // websocket长连接建立回调函数
        function ws_onopen() { 
            console.log("websocket onopen"); 
        }
        // websocket长连接关闭回调函数
        function ws_onclose() { 
            console.log("websocket onclose"); 
        }
        // websocket长连接错误回调函数
        function ws_onerror() { 
            console.log("websocket onerror");
        }
        // websocket长连接通信回调函数
        function ws_onmessage(evt) { 
            var response = JSON.parse(evt.data);
            if (response.result == false) {
                // 响应失败时，直接返回登入页面
                alert(evt.data);
                location.replace("/login.html");
                return;
            }
            if (response["optype"] == "hall_ready") {
                alert("游戏大厅连接建立成功");
            } else if (response["optype"] == "match_success") {
                alert("对战匹配成功，进入游戏房间");
                location.replace("/game_room.html");
            } else if (response["optype"] == "match_start") {
                console.log("玩家已经加入匹配队列");
                button_flag = "start";
                be.innerHTML = "匹配中...点击按钮停止匹配";
                return;
            } else if (response["optype"] == "match_stop") {
                console.log("玩家已经移除匹配队列");
                button_flag = "stop";
                be.innerHTML = "开始匹配";
                return;
            } else {
                // 未知响应类型，直接返回登入页面
                alert(evt.data);
                location.replace("/login.html");
                return;
            }
        }

        // 获取玩家信息，显示到界面中
        function get_user_info() {
            $.ajax({
                url: "/info",
                type: "get",
                success: function(res) {
                    // 如果验证成功，给screen内部添加一个html页面，显示在游戏大厅中
                    var info_html = "<p>" + "用户：" + res.username + " 积分：" + res.score + 
                        "</br>" + "比赛场次：" + res.total_count + " 获胜场次：" + res.win_count + "</p>";
                    var screen_div = document.getElementById("screen");
                    screen_div.innerHTML = info_html;

                    // 初始化websocket长连接，并设置回调函数
                    ws_hdl = new WebSocket(ws_url);
                    ws_hdl.onopen = ws_onopen;
                    ws_hdl.onclose = ws_onclose;
                    ws_hdl.onerror = ws_onerror;
                    ws_hdl.onmessage = ws_onmessage;
                },
                error: function(xhr) {
                    // 如果验证失败，提示错误信息，并跳转到登入界面
                    alert(JSON.stringify(xhr));
                    location.replace("/login.html");
                }
            })
        }
        get_user_info();

    </script>
</body>
</html>